// 基础样式
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// 继承样式
.success {
  @extend .message;
  border-color: green;
}

/*
   继承 @extend 让一个选择器继承另一个选择器的样式。
   特点：
        不会复制代码，而是将选择器合并到同一组规则中。
        生成的 CSS 更简洁，但灵活性较低。
        适合共享完全相同的样式（如按钮变体）。

  编译后：（合并选择器， CSS 简洁）
  .message, .success {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }

  .success {
    border-color: green;
  }
*/